<template>
  <el-dialog width="600px" :title='showTitle' :visible="props.showDialog" @cancel="btnCancel">
    <el-form label-width="30%" :model="formData" :rules="userRules" ref="confirm">
      <el-form-item label="手机号:" prop="phone">
        <el-input placeholder="请输入手机号" class="narrow-input" v-model="formData.phone"></el-input>
      </el-form-item>

      <el-form-item label="默认密码:" prop="password">
        <el-input placeholder="请输入密码" class="narrow-input" v-model="formData.password"></el-input>
      </el-form-item>

      <el-form-item label="真实姓名:" prop="realName"> 
        <el-input placeholder="请输入真实姓名" class="narrow-input" v-model="formData.realName"></el-input>
      </el-form-item>

      <el-form-item label="账号:" prop="account">
        <el-input placeholder="请输入账号" class="narrow-input" v-model="formData.account"></el-input>
      </el-form-item>

      <el-form-item label="组织架构:" prop="deptId">
        <el-select placeholder="请选择组织架构" class="narrow-input" v-model="formData.deptId">
          <el-option v-for="item in deptList " :key="item.id"  :value="item.content"> {{ item.content }}</el-option></el-select>
      </el-form-item>

      <el-form-item label="职级:" prop="postId">
        <el-select placeholder="请选择职级" class="narrow-input" v-model="formData.postId">
        <el-option v-for="item in postList " :key="item.id" :label="item.name" :value="item.id"></el-option>
      </el-select>
      </el-form-item>

      <el-form-item label="角色分配:" prop="role">
        <el-radio-group v-model="formData.role">
          <el-radio :label="1" checked>超级管理员</el-radio>
          <el-radio :label="2">销售主管</el-radio>
          <el-radio :label="3">销售专员</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-row type="flex" justify="center">
        <el-button class="footer" @click="btnCancel">取消</el-button>
        <el-button class="footer" type="primary" @click="btnConfirm">确认</el-button>
      </el-row>
    </el-form>
  </el-dialog>
</template>
<script setup>
import { defineProps, defineEmits ,ref, onMounted, computed} from 'vue'
import { getPostId , getDeptId ,addUser,editListApi} from '@/api/userControl'
import {  ElMessage } from 'element-plus';

const props = defineProps({
  showDialog: {
    type: Boolean,
    default: false
  }

})

// 子传父 关掉弹层
const emits = defineEmits(['closeDialog','addUserAPI'])
const btnCancel = () => {
  emits('closeDialog', false)
  // props.value.showDialog=false
  confirm.value.resetFields()

}

// 校验规则
const userRules = {
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
  ],
  realName: [
    { required: true, message: '请输入真实姓名', trigger: 'blur' },
    { min: 2, max: 4, message: '姓名为2-4个字', trigger: 'blur' }
  ],
  account: [{ required: true, message: '请输入账号', trigger: 'blur' }],
  role: [{ required: true, message: '请选择角色', trigger: 'blur' }]
}

// 定义数据
const formData = ref({
  phone:null,
  password:'123456',
  realName:'',
  account:'',
  deptId:'',
  role:1,  
  postId:'',
  status:0,
  createTime:'',
  id:null
})

onMounted(()=>{
  getPostIdAPI()
  getDeptIdAPI()
})

// 新增岗位
const postList = ref([])
const getPostIdAPI = async () => {
  const result = await getPostId()
  if(result.code===200){
    const data = result.data
    postList.value =data.map((item,index) =>({
      id:index,
      name:item
    }))

  }else{
    ElMessage.success('哈哈哈,失败了吧')
  
  }
  console.log(result.data)
}

const deptList = ref([])
const getDeptIdAPI = async () => {
  const res = await getDeptId(18)
  deptList.value =res.data
  
}





// 声明回显数据的方法
const editConfirm =(row) => {
 formData.value = row
//  console.log(formData.value)
 
}

// 暴露方法给父组件
defineExpose({
  editConfirm
})


const showTitle = computed(() =>{
  return formData.value.id? '修改用户':'新增用户'
  
}) 

const confirm =ref(null)
// 新增用户
const btnConfirm = async () => {
  
if(formData.value.id){
   await  editListApi(formData.value)
  await confirm.value.validate()
  ElMessage.success('修改成功')
  btnCancel()
}
else{

  await addUser(formData.value)
  // console.log(formData.value)
  await confirm.value.validate()
  
  ElMessage.success('新增成功')

  btnCancel()
}
emits('addUserAPI')

}

</script>

<style lang="less" scoped>
.narrow-input {
  width: 300px;
}
.footer {
  margin-top: 50px;
}
</style>